<template>
	<view class="container">
		<carHeader style="padding:10rpx;" :title="'详情'"></carHeader>

		<view class="repairInfo">
			<view class="one">
				<text>维修信息</text>
			</view>
			<view class="info">
				<text>维修单号：{{obj.repairReservationId}}</text>
			</view>
			<view class="info">
				<text>车主姓名：{{obj.name}}</text>
			</view>
			<view class="info">
				<text>联系方式：{{obj.phone}}</text>
				<uni-icons type="phone-filled" size="20" color="#3082FB" style="float: right;margin-right: 20px;">
				</uni-icons>
			</view>
			<view class="info">
				<text>维修方式：{{obj.repairType}}</text>
			</view>
			<view class="info">
				<text>取车位置：{{obj.location}}</text>
				<uni-icons type="paperplane-filled" size="20" color="#3082FB" style="float: right;margin-right: 20px;">
				</uni-icons>
			</view>
			<view class="info">
				<text>预约日期：{{obj.reservationTime}}</text>
			</view>
			<view class="info">
				<text>提交日期：{{obj.createTime}}</text>
			</view>
			<view class="info">
				<text v-if="isShow">到场日期：{{obj2.arrivalTime}}</text>
			</view>

		</view>

		<view class="carInfo">
			<view class="one">
				<text>车辆信息</text>
			</view>
			<view class="info">
				<text>车辆类型：{{obj.type}}</text>
			</view>
			<view class="info">
				<text>车牌号：{{obj.rcarNum}}</text>
			</view>
			<view class="info">
				<text>整车照片：\n</text>
				<image :src="obj.vehiclePhotos"></image>
			</view>
			<view class="info">
				<text>维修部位照片：\n</text>
				<view v-for="(item,index) in obj.repairPhotos" :key="index" style="display: inline-block;">
					<image :src="item.photo"></image>
				</view>

			</view>

		</view>

		<view class="btn">
			<u-button @click="dialogToggle('info')" :disabled="isVerified" type="primary"
				:color="isVerified ? '#808080' : '#0662E6'" shape="circle">
				{{isVerified ? '已到场' : '确认到场'}}</u-button>
			<!-- <view v-else>已核销</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				obj: {},
				obj2: {},
				/* form:{
					repairNumber:"3535252",
					name:"张",
					phone:"1993829282",
					repairMethod:"上门取车/到店维修",
					address:"山阳区32号",
					appointmentTime:"2022/11/10 11:00",
					submitTime:"2022/11/08 12:34",
					comeTime:""
				},
				carForm:{
					carType:"大客车",
					carNumber:"豫J45323",
					carPhoto:"/static/车联网服务商家端-00登录_slices/组 6(1).png",
					repairPhotos:[
						{
							photo:"/static/车联网服务商家端-00登录_slices/组 6(1).png"
						},
						{
							photo:"/static/车联网服务商家端-00登录_slices/组 6(1).png"
						},
						{
							photo:"/static/车联网服务商家端-00登录_slices/组 6(1).png"
						},
						
					]
				}, */
				msgType: "info",
				// status:obj.status,
				isVerified: false,
				isShow: false,
			};
		},
		onLoad(option) {
			const that = this;
			console.log(option);
			console.log(typeof(option.id));
			uni.request({
					url: "http://localhost:8080/carShop/repair/" + Number(option.id),
					method: "GET",
					success(res) {
						console.log("成功查看维修任务详情");
						console.log(res);
						that.obj = res.data.data;
						console.log(that.obj);
					},
					fail: (res) => {
						console.log("查看维修任务详情失败");
					}
				})


		},
		methods: {
			dialogToggle(type) {
				const that=this;
				this.msgType = type
				console.log(type);
				this.isVerified = true;
				this.isShow = true;
				// this.status = obj2.status; 
				const now = new Date();
				// this.obj.arrivalTime = now.toLocaleString();
				console.log(this.isShow);
				console.log(this.obj2.arrivalTime);
				uni.request({
					url: "http://localhost:8080/carShop/repair/update/" + Number(that.obj
						.repairReservationId),
					method: "PUT",
					// data:{
					// 	id:that.obj.repairReservationId
					// },
					success(res) {
						console.log("核销维修任务（确认到场-更新到场时间，维修状态）");
						console.log(res);
						that.obj2 = res.data.data;
						console.log(that.obj2);
					},
					fail: (res) => {
						console.log("核销维修任务失败");
					}
				})
			}
		},
	}
</script>

<style lang="scss">
	.repairInfo {
		background-color: white;
		height: 650rpx;
		width: 95%;
		position: absolute;
		top: 150rpx;
		left: 20rpx;
		border-radius: 20rpx;
		z-index: 1;

		.one {
			padding: 20rpx 30rpx;
			border-bottom: 5px solid #F9F9F9;
		}

		.info {
			margin: 30rpx 30rpx;
			font-size: 13px;
		}
	}

	.carInfo {
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 460rpx;
		background-color: white;
		height: 800rpx;
		width: 95%;
		// position: absolute;
		// top: 700rpx;
		// left: 20rpx;
		border-radius: 20rpx;
		z-index: 1;

		.one {
			padding: 20rpx 30rpx;
			border-bottom: 5px solid #F9F9F9;
		}

		.info {
			margin: 30rpx 30rpx;
			font-size: 13px;

			image {
				width: 80px;
				height: 80px;
				margin: 10px 10px;
			}
		}
	}

	.btn {
		margin: 40px auto;
		width: 70%;
	}
</style>